<template>
    <main>
        <div class="ml-wrapper ml-enterprise">
            <div class="container"><h2>高级定制和企业服务</h2>
                <div class="plan-wrapper">
                    <div class="plan-item enterprise">
                        <div class="border"></div>
                        <div class="header"><h4>增加设备</h4><span>解除客户端限制</span></div>
                        <div class="description"><p>适用于家庭设备比较多的情况，提升设备限制</p>
                            <div class="price nbfont">￥20/月起</div>
                            <a href="https://getmalus.com/dashboard/vas?planId=device_2" target="_blank"
                               class="ml-btn solid large">立即购买</a></div>
                        <div class="feature">
                            <div class="title">包含服务:</div>
                            <ul class="feature-list">
                                <li>可以多购买2个或4台设备，增加客户端的连接限制</li>
                                <li>平均每台设备 ¥10/30天，游戏会员平均为¥18/30天</li>
                                <li>可以自助购买开通</li>
                            </ul>
                        </div>
                        <div class="step">
                            <div class="title">如何增加：</div>
                            <ol class="step-list">
                                <li>点击购买按照套餐时长支付</li>
                            </ol>
                        </div>
                    </div>
                    <div class="plan-item enterprise">
                        <div class="border"></div>
                        <div class="header"><h4>影音提速</h4><span>提速100M带宽</span></div>
                        <div class="description"><p>将带宽提速到100M，可一定程度提升音视频加载和减少缓冲</p>
                            <div class="price nbfont">￥20/月起</div>
                            <a href="https://getmalus.com/dashboard/vas?planId=bandwidth_100" target="_blank"
                               class="ml-btn solid large">立即购买</a></div>
                        <div class="feature">
                            <div class="title">包含服务:</div>
                            <ul class="feature-list">
                                <li>峰值带宽提速到100Mb，适用于音视频播放的场景</li>
                                <li>仅增加影音线路的带宽，游戏线路带宽不会随之增加</li>
                                <li>可以自助购买开通</li>
                            </ul>
                        </div>
                        <div class="step">
                            <div class="title">如何增加：</div>
                            <ol class="step-list">
                                <li>点击购买按照套餐时长支付</li>
                            </ol>
                        </div>
                    </div>
                    <div class="plan-item enterprise-pro">
                        <div class="border"></div>
                        <div class="header"><h4>企业/团队版</h4><span>独享线路</span></div>
                        <div class="description"><p>为需要定制的企业或者团队提供，线路和服务器完全独享</p>
                            <div class="price nbfont">￥3000+/月</div>
                            <a href="https://forms.gle/qPv2VApS2wM1nNZi9" target="_blank" class="ml-btn solid large">立即咨询</a>
                        </div>
                        <div class="feature">
                            <div class="title">包含服务:</div>
                            <ul class="feature-list">
                                <li>可定制10Mb-1Gb线路，独立IP，独立服务器</li>
                                <li>不限制客户端数量，可访问网页和OA，企业专人客服支持</li>
                                <li>需要联系商务沟通</li>
                            </ul>
                        </div>
                        <div class="step">
                            <div class="title">如何申请:</div>
                            <ol class="step-list">
                                <li>填写申请表单等待商务人员联系沟通协商方案</li>
                            </ol>
                        </div>
                    </div>
                </div>
                <div class="note"><span><strong>说明：</strong> 所有使用都需要遵守中华人民共和国和当地相关法律法规，Malus加速器不对用户行为负责，若由于使用问题造成任何法律问题，Malus可以无条件终止帐号。</span>
                </div>
            </div>
        </div>
    </main>
</template>

<script>
export default {
    name: "Enterprise"
}
</script>

<style scoped lang="scss">
@media (max-width: 767.98px) {
    h2 {
        font-size: 32px!important;
    }
    .ml-enterprise{
        .plan-wrapper {
            flex-direction: column;
            .plan-item {
                width: 100%!important;
                margin-right: 0!important;
            }
        }
    }
}

main {
    .ml-enterprise {
        margin-top: 120px;

        .plan-wrapper {
            display: flex;
            align-items: flex-start;

            .plan-item {
                margin-top: 56px;
                padding: 48px 32px;
                margin-right: 56px;
                width: 400px;
                min-height: 718px;
                box-shadow: 0 8px 24px 0 rgb(82 94 102 / 15%);
                border-radius: 0 0 4px 4px;
                position: relative;

                .border {
                    display: block;
                    height: 4px;
                    width: 100%;
                    background: linear-gradient(
                            -90deg, #90f, #571eff, #09f);
                    position: absolute;
                    top: 0;
                    left: 0;
                }

                .header {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    h4 {
                        font-size: 28px;
                        font-weight: 400;
                        color: #333;
                    }

                    span {
                        margin-left: 12px;
                        font-size: 18px;
                        color: #7b7b7b;
                    }
                }

                .description {
                    p {
                        margin-top: 16px;
                        font-size: 14px;
                        line-height: 1.6;
                        color: #7B7B7B;
                    }

                    .price {
                        margin-top: 24px;
                        font-size: 26px;
                        font-weight: 400;
                        height: 31px;
                    }

                    a {
                        margin: 24px 0 0;
                        width: 100%;
                        box-shadow: 0 8px 24px 0 rgb(82 94 102 / 15%);
                        cursor: pointer;
                        background: linear-gradient(
                                -90deg, #90f, #571eff, #09f);
                        height: 50px;
                        padding: 0 46px;
                        font-weight: 500;
                        font-size: 16px;
                        color: #fff;
                        display: inline-flex;
                        justify-content: center;
                        border-radius: 4px;
                        transition: all .2s ease;
                    }
                }

                .feature {
                    margin-top: 32px;

                    .title {
                        font-size: 16px;
                        font-weight: 500;
                        color: #333;
                        margin-bottom: 18px;
                    }

                    .feature-list {
                        li {
                            margin-top: 12px;
                            font-size: 14px;
                            color: #555;
                            line-height: 1.64;
                            position: relative;
                            padding-left: 22px;
                        }

                        li:before {
                            content: "";
                            font-family: remixicon;
                            font-size: 14px;
                            color: #4D55E8;
                            position: absolute;
                            left: 1px;
                        }
                    }
                }

                .step {
                    margin-top: 32px;

                    .title {
                        font-size: 16px;
                        font-weight: 500;
                        color: #333;
                        margin-bottom: 18px;
                    }

                    .step-list {
                        li {
                            margin-top: 6px;
                            font-size: 14px;
                            color: #555;
                            line-height: 1.64;
                            position: relative;
                            padding-left: 2px;
                        }
                    }
                }
            }
        }

        .note {
            margin: 56px 0 72px;

            span {
                margin-top: 3px;
                font-size: 14px;
                color: #555;
                line-height: 1.64;
            }
        }
    }
}
</style>
